<template>
	<el-tree-select
		ref="TreeSelect"
		:data="options"
		clearable
		filterable
		check-strictly
		collapse-tags
		collapse-tags-tooltip
		node-key="id"
		:render-after-expand="false"
		v-bind="$attrs"
	>
		<template v-for="(slotKey, slotIndex) in Object.keys($slots)" :key="slotIndex" v-slot:[slotKey]>
			<slot :name="slotKey"></slot>
		</template>
	</el-tree-select>
</template>

<script setup name="MyTreeSelect">
const TreeSelect = shallowRef(null),
	/***
	 * 参数属性
	 * @property {Object[]} modelValue 默认值
	 * @property {list[]} list 下拉列表数据
	 * @property {String} type store.dispatch的方法名
	 */
	props = defineProps({
		modelValue: {},
		list: {
			type: Array,
			default: () => []
		},
		type: {
			type: String
		}
	}),
	options = ref();

watch(
	() => props.list,
	(val) => {
		options.value = val;
	},
	{ deep: true, immediate: true }
);

watch(
	() => $store.com[props.type?.replace('GET', '')],
	(val) => {
		if (props.type) options.value = val;
	},
	{ deep: true, immediate: true }
);

/**
 *  初始化执行逻辑 调用$store获取数据方法
 */
if (props.type) $store?.com[props.type]();
</script>
